<template>
  <div class="h-full w-full login-bg  flex" >
      <div class="w-2/3 items-center flex flex-col justify-center img-container">
        <div class="w-full flex justify-center text-3xl text-white mb-28 animate__animated animate__lightSpeedInLeft">
          <div style="font-family: Cursive">黄沙百战穿金甲，不破楼兰终不还</div>
        </div>
        <div class="w-full flex items-center justify-center">
          <img class="w-2/3 animate__animated animate__backInLeft"  src="../../assets/img/login/analytics.png">
        </div>
      </div>
      <div class="flex-1 h-full flex items-center justify-center" >
        <div class="w-96 h-96 animate__animated animate__fadeInRight">
          <div class="text-2xl font-bold dark:text-gray-400">登录</div>
          <div class="mt-5">
            <el-form
                ref="ruleFormRef"
                :model="state.loginForm"
                :rules="rules"
                @keyup.enter="login"
                size="large"
            >
              <el-form-item  prop="username">
                <el-input prefix-icon="user"   placeholder="用户名" v-model="state.loginForm.username" />
              </el-form-item>
              <el-form-item  prop="password">
                <el-input prefix-icon="lock"  type="password" show-password placeholder="密码" v-model="state.loginForm.password" />
              </el-form-item>
              <el-form-item  prop="code">
                <div class="flex w-full">
                  <div class="flex-1 mr-2.5">
                    <el-input   type="text"  placeholder="验证码" v-model="state.loginForm.code">
                      <template #prefix>
                        <BaseIcon :size="15"  icon="icons:carbon:security"></BaseIcon>
                      </template>
                    </el-input>
                  </div>
                  <div class="h-10 w-28">
                    <img v-show="codeUrl" :src="codeUrl" @click="getCode" class="w-full h-full"/>
                  </div>
                </div>
              </el-form-item>
            </el-form>
            <el-button class="w-full !h-10"  @click="login" :loading="buttonLoading" type="primary">登 录</el-button>
          </div>
        </div>
      </div>

  </div>
</template>

<script setup lang="ts">
import {onMounted, reactive, ref} from "vue";
import {useUserStore} from "/@/store/modules/user";
import {getCodeImage} from "/@/api/auth/login";
const closeLoading = () => {
  let element: HTMLElement = document.querySelector(".loading-bg") as HTMLElement;
  element.style.display = "none";
}
const  userStore = useUserStore();
const buttonLoading= ref(false);
const captchaOnOff = ref(true);
const state = reactive({
  loginForm:{
    username: '',
    password: '',
    code: '',
    uuid: '',
    rememberMe: false,
  }
})

const codeUrl = ref("");
const rules = {
  username: [
    { required: true, message: '用户名不能为空', trigger: 'blur' },
    { min: 1, max: 32, message: '用户名长度为6到32', trigger: 'blur' },
  ],
  password: [
    { required: true, message: '密码不能为空', trigger: 'blur' },
    { min: 1, max: 32, message: '密码长度为6到32', trigger: 'blur' },
  ]
}
const login = async () => {
  buttonLoading.value = true
  await userStore.login(state.loginForm,()=> {
    buttonLoading.value = false
    getCode()
    state.loginForm.code = ''
  })
}
/**
 * 获取验证码
 */
const getCode = async () => {
  let res = await getCodeImage()
  codeUrl.value = res.image
  state.loginForm.uuid = res.uuid

}
onMounted(()=>{
  getCode()
  closeLoading()
})
</script>
<style>

</style>
<style scoped>
.img-container{
  background-color: var(--el-color-primary);
}
</style>